

import React, { useEffect, useRef, useState } from 'react'
import { commit } from "./api"
import User from "../archive_login/index"
// import { Avatar, Image, Button, Comment, Form, List, Input } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import style from "./index.module.scss"
import { MyState, USERSTATE } from "../../type/router.d"
import { useSelector } from "react-redux"
import { connect } from 'react-redux'
import { bindActionCreators, Dispatch } from "redux"
import * as action from "../../store/modules/action"
import { Avatar, Button, Comment, Form, Input, List } from 'antd';
//评论列表
import { ARCHIVECOMMENT } from "../../type/router.d"
import moment from 'moment';
//应用评论组件
import AppComment from "../archive_comments/index"
interface PROPS {
    articleId: string,
    artichiveUserState: USERSTATE[],
    // history:any
}
export const Comments = (props: PROPS) => {
    // const { artichiveUserState } = useSelector(({ artichiveUserState }: any) => {
    //     return { ...artichiveUserState }
    // })
    //评论列表
    const [commentList, setCommentList] = useState<ARCHIVECOMMENT[]>([])
    //输入框value
    const [value, setValue] = useState("")
    const { TextArea } = Input;
    const pageParams = useRef({
        page: 1,
        pageSize: 6
    })
    useEffect(() => {
        console.log(props.articleId)
        const params = pageParams.current;
        const id = props.articleId
        commit.getArchivCommit(props.articleId, params).then(res => {
            console.log(res.data.data[0])
            setCommentList(res.data.data[0])
        })
        console.log(props.artichiveUserState)
        console.log(value)
        // console.log(props.history)
        // console.log(JSON.parse(JSON.stringify( localStorage.getItem("User"))))
    }, [])
    const send = (value: string) => {
        console.log(value)
        const data = {
            avatar: props.artichiveUserState[0].avatar,
            hostId: props.articleId,
            name: props.artichiveUserState[0].name,
            email: props.artichiveUserState[0].email,
            content: value,
            url: `/index/archiveDetails/${props.articleId}`
            // email:,
            // content:,
            // url:""
        }
        commit.createcomment(data).then(res => {
            console.log(res)
        })
    }
    return (
        <>
            <div className={style["comment-wrap"]}>
                <div className={style["comment-wrap-avatar"]}><Avatar src="https://joeschmoe.io/api/v1/random"></Avatar></div>
                <div className={style["comment-wrap-ant-input"]}>
                    <div >
                        <>
                            <TextArea onChange={(e) => { setValue(e.target.value) }} rows={4} />
                            <br />
                            <br />
                        </>
                    </div>
                    <div className={style["comment-wrap-send"]}>
                        <div>表情🙂</div>
                        <button onClick={() => { send(value) }}>发布</button>
                    </div>
                </div>
            </div>
            {/* <AppComment></AppComment> */}
            {/* 评论列表 */}
            {commentList.length && commentList.map((item: ARCHIVECOMMENT) =>
                <div className={style["comment-list"]}>
                    <div className={style["comment-wrap-avatar"]}><Avatar src={item.avatar}></Avatar></div>
                    <div className={style["comment-wrap-ant-input"]}>
                    
                        <div >
                            <>
                                <h3>{item.name}</h3>
                                <h5>{item.content}</h5>
                                <div>{item.userAgent} <span></span> 回复</div>
                            </>
                        </div>
                        
                    </div>
                </div>)}

            <User></User>
        </>
    )
}

const mapStateToProps = (state: MyState) => ({
    artichiveUserState: state.artichiveUserState
})

const mapDispatchToProps = (dispatch: Dispatch) => {
    return bindActionCreators(action, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Comments)